<template>
  <div class="home-page">
    <el-container class="container">
      <el-aside class="aside">
        <Aside></Aside>
      </el-aside>
      <el-container class="main">
        <el-header class="header">
          <Head></Head>
        </el-header>
        <div class="content">
          <div class="router-view">
            <RouterView></RouterView>
          </div>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ArrowLeft } from "@element-plus/icons-vue";
//头部
import Head from "./components/layout/Head.vue";
//左边栏
import Aside from "./components/layout/Aside.vue";
import layoutService from "./ts/service/layout/Layout.service";

const back = () => {
  console.log("点击了返回按钮");
};
</script>
<style lang='scss' scoped>
.home-page {
  height: 100%;

  .container {
    height: 100%;
  }

  .header {
    height: 80px;
    padding: 0;
    position: fixed;
    width: calc(100% - 220px);
  }

  .aside {
    position: fixed;
    width: 220px;
    height: 100%;
  }

  .main {
    padding-left: 220px;
  }
  .content {
    padding-top: 80px;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 12px;
    .top-header {
      border-bottom: 1px solid #eee;
      padding-bottom: 14px;
    }
  }
}

.el-main {
  padding: 0 !important;
}
</style>
